<template>
  <div class="container">
    <div class="top">机器人任务管理</div>
    <div class="header">
      <div class="form-container">
        <el-form :model="queryParams" label-width="100px" class="demo-ruleForm">
          <el-form-item label="机器人名称：" prop="robotName">
            <el-input placeholder="请输入机器人名称" v-model="queryParams.robotName"></el-input>
          </el-form-item>
          <el-form-item label="任务名称：" prop="taskName">
            <el-input placeholder="请输入任务名称" v-model="queryParams.taskName"></el-input>
          </el-form-item>
          <el-form-item label="是否自动:" prop="is_auto">
            <el-select v-model="queryParams.is_auto" @change="handleSelection"  placeholder="请选择">
              <el-option v-for="item in ZDoptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="
                                background: linear-gradient(0deg, #123150, #1C97B1);
                                border-radius: 2px;
                                border: 1px solid #1560AC;
                                color: #fff;
                                width:80px;
                                height: 37px;
                                margin: 22px 0 0 -60px" @click="onSearch">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="
                                background: linear-gradient(0deg, #081D32, #1DB27C);
                                border-radius: 2px;
                                border: 1px solid #439B2B;
                                color: #fff;
                                width:80px;
                                height: 37px;
                                margin: 22px 0 0 -92px " @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="table">
      <div class="right">
        <el-button type="primary" :disabled="multiple" style=" 
                      background: linear-gradient(0deg, #123150, #1C97B1);
                      border-radius: 2px;
                      border: 1px solid #1560AC;
                      color: #fff;
                      width:80px; 
                      height: 37px;  
                      " @click="SetupAutomatictasks">设置自动</el-button>
        <el-button type="primary" :disabled="multiple" style=" 
                      background: linear-gradient(0deg, #123150, #1C97B1);
                      border-radius: 2px;
                      border: 1px solid #1560AC;
                      color: #fff;
                      width:80px; 
                      height: 37px;  
                      " @click="CancelAutomatictask">取消自动</el-button>
        <el-button type="primary" style=" 
                      background: linear-gradient(0deg, #4C3508, #1E1913);
                      border-radius: 2px;
                      border: 1px solid #947A20;
                      color: #fff;
                      width:80px; 
                      height: 37px;  
                      " @click="addOpen">新增</el-button>
        <el-button type="primary" :disabled="multiple" style=" 
                      background: linear-gradient(0deg, #4C0820, #1E1913);
                      border-radius: 2px;
                      border: 1px solid #942028;
                      color: #fff;
                      width:80px;
                      height: 37px;
                      margin-left:5px" @click="deleteHandle">删除</el-button>
      </div>
      <el-table border :row-key="(row) => { return row.id }" :data="tableData" @selection-change="handleSelectionChange"
        :cell-style="{ background: '#123150', borderColor: '#1560AC', color: '#EDEDED' }"
        :row-style="{ background: '#123150', borderColor: '#1560AC', color: '#EDEDED' }"
        :header-cell-style="{ background: '#123150', borderColor: '#1560AC', color: '#EDEDED', fontSize: '14px', }"
        style="color:#EDEDED; border-color: #1560AC;width:100%">
        <el-table-column type="selection" reserve-selection width="55" align="center">
        </el-table-column>
        <el-table-column prop="robotName" label="机器人名称" align="center">
        </el-table-column>
        <el-table-column prop="taskName" label="任务名称" align="center">
        </el-table-column>
        <el-table-column prop="taskNo" label="任务编号" align="center">
        </el-table-column>
        <el-table-column prop="is_auto" label="是否自动" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.is_auto == 1">
              自动
            </div>
            <div v-if="scope.row.is_auto == 0">
              非自动
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="task_state" label="任务状态" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.task_state == 1">
              已执行
            </div>
            <div v-if="scope.row.task_state == 0">
              未执行
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="creater_time" label="创建时间" width="170" align="center">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.creater_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="170">
          <template slot-scope="scope">
            <el-button class="btn1" size="mini" @click="editOpen(scope.row)">查看任务详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增 -->
    <AddOrEdit :dialogTitle="title" :formData="formData" :appendDialogVisible="appendDialog" @updataList="TaskList"
      @cencelSend="cencel" />
    <!-- 查看详情 -->
    <ViewDetails :dialogTitle="title1" :appendDialogViewDetails="ViewDetails" :taskNo="taskNo" @cencelSend="cencelXQ" />
    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="TaskList" />
  </div>
</template>
<script>
import { getRobotTaskList, dleteTask, Automatictask, Canceltask } from '@/api/cyRobot/quest'
import AddOrEdit from './component/addAndEdit.vue'
import ViewDetails from './component/viewDetails'
export default {
  name: 'quest',
  components: {
    AddOrEdit,
    ViewDetails
  },
  data() {
    return {
      //分页相关
      total: 0, //总条数
      // 选中数组
      ids: [],
      ids1: '',
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      queryParams: {
        taskNo: '',
        taskName: '',
        is_auto: '',
        pageNum: 1,
        pageSize: 4
      },
      ZDoptions: [{
        value: 1,
        label: '自动'
      },
      {
        value: 0,
        label: '非自动'
      }
      ],
      addOreidtType: '0',
      //新增删除弹窗
      title: "新增",
      //新增修改的表单数据
      formData: {},
      //新增按钮
      appendDialog: false,
      tableData: [],
      //查看详情
      title1: '查看详情',
      //查看详情按钮
      ViewDetails: false,
      //任务编号
      taskNo: '',
    };
  },
  created() {
    this.TaskList()
  },
  mounted() {
    this.timer = setInterval(() => {
      this.TaskList()
    }, 2000)

  },
  methods: {
    handleSelection(value){
      // 在这里添加你的逻辑，例如更新其他数据或触发其他操作
      if (value === 0) {
        this.queryParams.is_auto = 0;
      } else if (value === 1) {
        this.queryParams.is_auto = 1;
      }
    
  },
    //设置自动任务
    SetupAutomatictasks() {
      if (this.ids.length != 0) {
        this.ids1 = this.ids.join(',')
        Automatictask(this.ids1).then(response => {
          if (response && response.code === 200) {
            this.$modal.msgSuccess(response.msg);
          } else {
            this.$modal.msgError(response.msg || '操作失败');
          }
        })
      } else {
        this.$message({
          type: 'warning',
          message: '请选择要设置的任务'
        })
      }
    },
    //取消自动任务
    CancelAutomatictask() {
      if (this.ids.length != 0) {
        this.ids1 = this.ids.join(',')
        Canceltask(this.ids1).then(response => {
          if (response && response.code === 200) {
            this.$modal.msgSuccess(response.msg);
          } else {
            this.$modal.msgError(response.msg || '操作失败');
          }
        })
      } else {
        this.$message({
          type: 'warning',
          message: '请选择要取消设置自动的任务'
        })
      }
    },
    //打开修改页面
    editOpen(row) {
      this.title1 = '查看详情'
      this.ViewDetails = true
      this.taskNo = row.id
    },
    //打开新增页面
    addOpen() {
      this.title = '新增'
      this.appendDialog = true
      this.formData = {}
    },
    // 取消----新增
    cencel() {
      this.appendDialog = false
      this.addOreidtType = '0'  //取消之后还原addOreidtType类型
      this.formData = {}//子组件触发父组件的cencel方法每次关闭之后将formData清空,方便每次修改是值在变子组件都能监听到值变化并进行相应操作
    },
    //取消----查看详情
    cencelXQ() {
      this.ViewDetails = false
    },
    TaskList() {
      getRobotTaskList(this.queryParams).then(response => {
        this.tableData = response.rows
        this.total = response.total
      })
    },
    //搜索操作
    onSearch() {
      this.TaskList()
    },
    //重置操作
    reset() {
      this.queryParams.robotName = null
      this.queryParams.taskName = null
      this.queryParams.is_auto = null
      this.TaskList()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      if (selection.length != 0) {
        this.single = selection.length != 1
        this.multiple = false
        this.ids = selection.map(item => item.id)

      } else {
        this.multiple = true
      }
    },
    //删除操作
    deleteHandle() {
      const id = String(this.ids.splice(','));//每次删除之前先将ids数组转化为逗号拼接的字符串;
      this.$confirm(`是否删ID为${id}的数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        dleteTask(id).then(response => {
          if (response) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.TaskList()//删除成功刷新列表
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
  },
  beforeDestroy() {
    if (this.timer) { clearInterval(this.timer); }
  }
}
</script>

<style lang='scss' scoped>
* {
  padding: 0;
  margin: 0;
}

.container {
  background-color: #123150;
  height: 100%;
  width: 100%;

  .top {
    width: 100%;
    height: 50px;
    text-align: left;
    line-height: 50px;
    background-color: #123150;
    border: 1px solid #1560AC;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    // margin: 0 0 0px 10px;
    //padding-left: 20px;
    border-left: none;
    border-top: none;
  }

  .header {
    width: 98%;
    margin: 10px 0 0 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;

    ::v-deep .el-form-item__label {
      margin: 20px 0px 0 0px;
      font-size: 13px;
      color: #b6b7be;
    }

    .el-form {
      width: 85%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;

      ::v-deep .el-textarea__inner {
        border: 1px solid #1560AC;
        background-color: #123150;
        margin: 30px 0 0 7px;
        height: 100px;
      }

      ::v-deep .el-input--medium .el-input__inner {
        color: #C1C1C1;
      }

      ::placeholder {
        font-size: 13px;
        color: #b6b7be;
      }

      ::v-deep .el-form-item__label {
        width: 99px !important;
      }
    }

    .el-input {
      width: 160px;
      height: 15px;
      margin: 20px 20px 0 10px;
    }

    ::v-deep .el-input__inner {
      border: 1px solid #1560AC;
      background-color: #123150;
    }
    ::v-deep .el-select{
               margin: 20px 0 0 0 ;
               width: 150px;
    }
  }

  .right {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
  }

  .table {
    width: 100%;
    margin: 20px 0 0 0;
    padding-left: 5px;
    padding-right: 5px;

    //最底下的线条
    ::v-deep .el-table::before,
    .el-table--group::after,
    .el-table--border::after {
      background-color: #1560AC;
    }

    //多选框
    ::v-deep .el-checkbox__inner {
      background: #123150;
      border-radius: 1px;
      border: 1px solid #1560AC;
    }

    .el-table__fit {
      background-color: #123150;
    }

    ::v-deep .el-button--default {
      width: 40px;
      height: 20px;
    }

    ::v-deep .el-button--danger {
      width: 50px;
      height: 20px;
    }

    ::v-deep .el-button--primary {
      width: 40px;
      height: 20px;
    }

    .btn1 {
      width: 90px;
      height: 25px;
      color: #fff;
      background: linear-gradient(0deg, #123150, #1C97B1);
      border-radius: 2px;
      border: 1px solid #1560AC;
    }

    ::v-deep .el-table__body-wrapper {
      background-color: #123150;
    }
  }

  .pageBtn {
    width: 99%;
    height: 60px;
    display: flex;
    justify-content: end;
    align-items: center;
  }
}
</style>
